<template>
  <nav-bar
    @road-condition="showRoadCondition"
    @heat-map="showHeatMap"
    @measure-map="measureMap"
    @close-measure="closeMeasure"
    @image-export="imageExport"
    @pdf-export="pdfExport"
    @search-event="searchEvent"
    @event-pop="eventPop"
    @monitor-pop="monitorPop"
  ></nav-bar>
  <div id="map">
    <div id="mouse-position"></div>
    <!-- popup弹窗开始 -->
    <div id="popup" class="ol-popup" ref="container">
      <!-- <a href="#" id="popup-closer" class="ol-popup-closer" ref="closer"></a> -->
      <div id="popup-content" ref="content"></div>
    </div>
    <!-- popup弹窗结尾 -->
  </div>

  <!-- 地图切换 -->
  <div class="toggle">
    <div class="toggle-box">
      <img src="@/assets/images/map1.png" @click="toggleMap('vector')" />
      <img src="@/assets/images/map2.png" @click="toggleMap('raster')" />
    </div>
  </div>
  <!-- 图层目录树 -->
  <div class="catalog" :class="{ show: showflag, hide: !showflag }">
    <div class="header">
      <div class="name">图层目录</div>
      <el-icon @click="hideCatalog" v-if="showflag"><ArrowDown /></el-icon>
      <el-icon @click="hideCatalog" v-else><ArrowUp /></el-icon>
    </div>
    <!-- <el-tree
      ref="treeRef"
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
      :props="defaultProps"
      @check="checkedMap"
      :default-checked-keys="['0-0', 0, 1, 2, 3, 4]"
    /> -->
    <el-tree
      ref="treeRef"
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
      :props="defaultProps"
      @check="checkedMap"
      :default-checked-keys="['0-0', 0, 1, 2, 3, 4]"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <img :src="data.icon" alt="" />
          <span>
            {{ node.label }}
          </span>
        </span>
      </template>
    </el-tree>
  </div>
  <!-- 热力图参数 -->
  <div id="menu" v-if="showHeat">
    <div>
      <span>热点半径:</span>
      <el-slider v-model="t_radius" :min="1" :max="50" @input="changeRadius" />
    </div>
    <div>
      <span>模糊尺寸:</span>
      <el-slider v-model="t_blur" :min="1" :max="50" @input="changeBlur" />
    </div>
  </div>
  <!-- 实时路况 -->
  <div class="road" v-if="flag">
    <div class="title">车流量</div>
    <div class="green1">
      <div class="green"></div>
      <span>500-1000</span>
    </div>
    <div class="yellow1">
      <div class="yellow"></div>
      <span>1000-1500</span>
    </div>
    <div class="red1">
      <div class="red"></div>
      <span>1500-2000</span>
    </div>
  </div>
  <!-- 拉框查询 -->
  <div class="query">
    <el-button type="danger" icon="Search" @click="frameQuery"
      >拉框查询事件</el-button
    >
  </div>
  <!-- 缓冲区分析 -->
  <div class="buffer">
    <el-button type="primary" @click="bufferAnalysis">缓冲区分析</el-button>
  </div>
  <frame-query
    v-if="queryFlag"
    :eventList="eventList"
    :queryFlag="queryFlag"
  ></frame-query>
  <!-- 输入框查询 -->
  <search-query
    :searchList="searchList"
    :dialogFlag="dialogFlag"
    @close-dialog="closeDialog"
  ></search-query>
  <buffer-analyst
    :areaList="areaList"
    :bufferFlag="bufferFlag"
    @close-buffer="closeBuffer"
  ></buffer-analyst>
</template>
<script setup>
// 导航栏组件
import NavBar from "@/components/NavBar.vue"
//导入拉框查询组件
import FrameQuery from "./components/FrameQuery.vue"
// 导入输入框查询组件
import SearchQuery from "./components/SearchQuery.vue"
//导入缓冲区分析组件
import BufferAnalyst from "./components/BufferAnalyst.vue"
//导入hooks
import { useInitMap } from "./hooks/useInitMap"
import { useTreeCatalog } from "./hooks/useTreeCatalog"
import { useShowRoadCondition } from "./hooks/useShowRoadCondition"
import { useHeatMap } from "./hooks/useHeatMap"
import { useMeasureMap } from "./hooks/useMeasureMap"
import { useMapExport } from "./hooks/useMapExport"
import { useFrameQuery } from "./hooks/useFrameQuery"
import { useSearchEvent } from "./hooks/useSearchEvent"
import { usePopupEvent } from "./hooks/usePopupEvent"
import { useBufferAnalysis } from "./hooks/useBufferAnalysis"
import { onMounted, ref } from "vue"
//初始化地图
const map = ref(null)
//地图文档
const docLayer = ref(null)
//初始化地图(加控件)
const { toggleMap, docName } = useInitMap(map, docLayer)

//图层目录树
const { defaultProps, data, checkedMap, hideCatalog, showflag, getFeatures } =
  useTreeCatalog(docName, docLayer)
//显示路况
const { showRoadCondition, flag } = useShowRoadCondition(docName, map)
//显示热力图
const { showHeatMap, t_radius, t_blur, changeRadius, changeBlur, showHeat } =
  useHeatMap(map)
//工具箱
const { measureMap, closeMeasure } = useMeasureMap(map)
//生成图片和pdf
const { imageExport, pdfExport } = useMapExport(map)
//拉框查询
const { frameQuery, eventList, queryFlag } = useFrameQuery(map, docName)
// 输入框查询
const { searchEvent, searchList, dialogFlag, closeDialog } = useSearchEvent(
  map,
  docName
)
// 缓冲区分析
const { bufferAnalysis, areaList, bufferFlag, closeBuffer } =
  useBufferAnalysis(map)
// //popup弹框
// const { eventPop, monitorPop, container, content } = usePopupEvent(map, docName)
/* 写事件pop弹窗 */

let mysource = null
let mylayer = null

var popup = null
const content = ref(null)
const container = ref(null)
const closer = ref(null)
const eventFlag = ref(false)

/* 监控的标志变量 */
const monitorFlag = ref(false)
let monitorsource = null
let monitorlayer = null
onMounted(() => {
  mysource = new ol.source.Vector({
    wrapX: false,
  })
  mylayer = new ol.layer.Vector({
    source: mysource,
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 4,
        fill: new ol.style.Fill({
          color: "#1fffff",
        }),
      }),
    }),
  })
  monitorsource = new ol.source.Vector({
    wrapX: false,
  })
  monitorlayer = new ol.layer.Vector({
    source: monitorsource,
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: "#21a675",
        }),
      }),
    }),
  })
  map.value.addLayer(mylayer)
  map.value.addLayer(monitorlayer)
  popup = new ol.Overlay({
    //要转换成overlay的HTML元素
    element: container.value,
    //当前窗口可见
    autoPan: true,
    //Popup放置的位置
    positioning: "bottom-center",
    //是否应该停止事件传播到地图窗口
    stopEvent: false,
    autoPanAnimation: {
      //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
      duration: 250,
    },
  })
})
function eventPop() {
  map.value.addOverlay(popup)
  eventFlag.value = !eventFlag.value
  if (eventFlag.value == true) {
    var service = { name: "traffic", layerId: 2 }
    Query.queryEventByGeom({
      service,
      /* 这样就能在函数外面拿到查询到的值 */
      callback: (res) => {
        var format = new Zondy.Format.PolygonJSON()
        /* 将mapgis要素json反序列化为ol.feature类型数组 */
        var features = format.read(res)
        /* 将查询到的要素添加到高亮图层中 */
        mysource.addFeatures(features)
      },
    })
    map.value.on("click", popQuery)
    map.value.on("pointermove", popClose)
  } else {
    map.value.un("click", popQuery)
    map.value.un("pointermove", popClose)
    map.value.removeOverlay()
    popup.setPosition(undefined)
    mysource.clear()
  }
}
let info = null
let position = null
function popQuery(evt) {
  var feature = map.value.forEachFeatureAtPixel(
    evt.pixel,
    function (feature, layer) {
      return feature
    }
  )
  if (feature) {
    position = feature.getGeometry().flatCoordinates
    popup.setPosition(position)
    /* 这个就可以拿到fid,拿到之后去空间数据库查这条数据 */
    Query.queryByFID({
      fid: feature.id_,
      service: {
        name: "traffic",
        layerId: 2,
      },
      callback: (res) => {
        res = JSON.parse(JSON.stringify(res)).SFEleArray[0].AttValue
        info = `事件类型：${res[1]}<br/>
                        事件等级：${res[2]}<br/>
                        发生时间：${res[3]}<br/>
                        发生地点：${res[4]}<br/>
                        车牌号：${res[5]}<br/>
                        驾驶员：${res[6]}<br/>
                        `
        setTimeout(() => {
          content.value.innerHTML = info
        }, 1)
      },
    })
  }
}
function popClose(e) {
  var pixel = map.value.getEventPixel(e.originalEvent)
  var hit = map.value.hasFeatureAtPixel(pixel)
  map.value.getTargetElement().style.cursor = hit ? "pointer" : ""
}

/* 写监控弹窗 */
function monitorPop() {
  map.value.addOverlay(popup)
  monitorFlag.value = !monitorFlag.value
  if (monitorFlag.value == true) {
    var service = { name: "traffic", layerId: 3 }
    Query.queryEventByGeom({
      service,
      /* 这样就能在函数外面拿到查询到的值 */
      callback: (res) => {
        var format = new Zondy.Format.PolygonJSON()
        /* 将mapgis要素json反序列化为ol.feature类型数组 */
        var features = format.read(res)
        /* 将查询到的要素添加到高亮图层中 */
        monitorsource.addFeatures(features)
      },
    })
    map.value.on("click", popQueryMonitor)
    map.value.on("pointermove", popClose)
  } else {
    map.value.un("click", popQueryMonitor)
    map.value.un("pointermove", popClose)
    map.value.removeOverlay()
    popup.setPosition(undefined)
    monitorsource.clear()
  }
}
function popQueryMonitor(evt) {
  var feature = map.value.forEachFeatureAtPixel(
    evt.pixel,
    function (feature, layer) {
      return feature
    }
  )
  if (feature) {
    position = feature.getGeometry().flatCoordinates
    popup.setPosition(position)
    /* 这个就可以拿到fid,拿到之后去空间数据库查这条数据 */
    Query.queryByFID({
      fid: feature.id_,
      service: {
        name: "traffic",
        layerId: 3,
      },
      callback: (res) => {
        res = JSON.parse(JSON.stringify(res)).SFEleArray[0].AttValue
        console.log(res)
        info = `编号：${res[1]}<br/>
                位置：${res[2]}<br/>
                 <video
          style="height:170px"
          src="../../src/assets/images/TomJack.mp4"
          autoplay
          muted
          controls
          loop
        ></video>`
        setTimeout(() => {
          content.value.innerHTML = info
        }, 1)
      },
    })
  }
}
</script>
<style lang="stylus" scoped>
#map
  width 100vw
  height 92vh
  box-sizing border-box
  .ol-popup
    position absolute
    background-color white
    -webkit-filter drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2))
    filter drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2))
    padding 15px
    border-radius 10px
    border 1px solid #cccccc
    bottom 17px
    left -32px
    width 300px
    font-size 5px
    line-height 1.5
    z-index 9999
  .ol-popup :after,.ol-popup:before
    top 100%
    border solid transparent
    content " "
    height 0
    width 0
    position absolute
    pointer-events none
  .ol-popup:after
    border-top-color white
    border-width 10px
    left 30px
    margin-left -10px
    .ol-popup-closer
      text-decoration none
      position absolute
      top 2px
      right 8px
    .ol-popup-closer:after
      content ""
    #popup-content
      font-size 5px
      font-family "微软雅黑"
    #popup-content .markerInfo
      font-weight bold;
   /*=S 自定义鹰眼样式 */
  >>>.ol-custom-overviewmap,
  .ol-custom-overviewmap.ol-uncollapsible
    bottom: auto
    left: auto
    right: 5px
    top: 5px
  >>>.ol-custom-overviewmap .ol-overviewmap-map
    border 2px solid #fff
    box-shadow 0 0 10px #000
    width 300px
    height 200px
    /* 鹰眼控件中显示当前窗口中主图区域的边框 */
  >>>.ol-custom-overviewmap .ol-overviewmap-box
    border: 2px solid #E74133;
  //比例尺样式
  >>>.ol-scale-line
    background-color rgba(0, 60, 136,.7)
  //zoomslider样式
  >>>.ol-zoomslider
    top 7em
  >>>.ol-control
    background-color rgba(0,0,0,.4)
    button
      background-color rgba(0, 60, 136,.7)
  //鼠标控件
  #mouse-position
    position fixed
    width 180px
    height 24px
    text-align center
    border-radius 10px
    bottom 10px
    right 50%
    background-color rgba(0, 60, 136,.7)
    z-index 999
  >>>.custom-mouse-position
    color #fff
  >>>.ol-selectable
    .tooltip {
      position: relative;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      color: white;
      padding: 4px 8px;
      opacity: 0.7;
      white-space: nowrap;
          }
    .tooltip-measure {
      opacity: 1;
      font-weight: bold;
    }
.toggle
  position fixed
  bottom 20px
  right 20px
  .toggle-box
    display flex
    width 250px
    justify-content space-around
    img
      width 100px
      height 100px
      border-radius 20px
      box-shadow 0 0 10px #000
      border 2px solid #fff
      box-sizing border-box
      cursor pointer
.catalog
  position fixed
  top 100px
  left 60px
  background-color #fff
  border-radius 10px
  border 1px solid #eee
  color #fff
  cursor pointer
  overflow hidden
  min-height 25px
  .header
    background-color #409eff
    border-radius 10px 10px 0 0
    display flex
    justify-content space-around
    height 25px
    line-height 25px
    position absolute
    top 0
    left 0
    z-index 1000
    width 100%
    .el-icon
      margin-top 5px
  .el-tree
    padding 35px 20px
    border-radius 10px
    img
      vertical-align middle
      padding-right 2px
@keyframes mymove {
from {height: 100px;}
to {height: 0px;}
}
@keyframes mymove1 {
from {height: 0px;}
to {height: 150px}
}
.catalog.hide
  animation mymove .2s linear
  height 0px
.catalog.show
  animation mymove1 .2s linear
  height 220px
// 热点图样式
#menu
  padding 5px 10px
  font-size 14px
  top 80px
  position fixed
  left 300px
  z-index 999
  width 200px
  background-color rgb(255,255,255)
  border-radius 10px
  box-shadow 0 0 10px #000
.road
  background-color blue
  position fixed
  top 80px
  left 700px
  z-index 999
  width 200px
  padding 5px 10px
  border-radius 10px
  background #fff
  box-shadow 0 0 10px #000
  .green,.yellow,.red
    width 100px
    height 5px
    background green
    border-radius 20px
  .yellow
    background yellow
  .red
    background red
  .green1,.yellow1,.red1
    display flex
    align-items center
  .title
    text-align center
    font-weight 700
    margin-bottom 5px
  span
    margin-left 10px
    color #606266
.query
  position fixed
  top 70px
  right 363px
.buffer
  position fixed
  top 70px
  right 520px
</style>
